<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
    <script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>
    <script th:src="@{/js/config.js}"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }

    html,
    body,
    #app,
    .el-container {
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
        /*外部间距也是如此设置*/
        margin: 3px;
        /*统一设置高度为100%*/
        height: 100%;
    }

    #app {
        /* 外面div宽高 */
        width: 300px;
        height: 200px;
        padding-top: 50px;
        padding-left: 30px;
        padding-right: 50px;
        display: flex;
        border: 1px solid #333333;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 30%;
        background-color: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
    }
</style>

<body style="background-image:url(/js/timg.jpg);
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
    <div id="app" v-cloak>
        <el-main>
            <el-form label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input show-password v-model="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登 陆</el-button>
                    <el-button @click="showUserTable">注 册</el-button>
                </el-form-item>
            </el-form>
        </el-main>

        <el-dialog title="注册" :visible.sync="dialogFormVisible">
            <el-form :model="user">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="user.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="80px">
                    <el-input show-password v-model="user.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" label-width="80px">
                    <el-input v-model="user.telephone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="80px">
                    <el-input v-model="user.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createUser">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            username: "",
            password: "",
            user: {
                username: "",
                password: "",
                telephone: "",
                email: ""
            },
        },
        methods: {
            showUserTable: function () {
                this.user = {
                    username: "",
                    password: "",
                    telephone: "",
                    email: ""
                };
                this.dialogFormVisible = true;
            },
            createUser: function () {
                $.ajax({
                    url: http + "/user/registered",
                    type: "post",
                    data: {
                        username: app.user.username,
                        password: app.user.password,
                        telephone: app.user.telephone,
                        email: app.user.email
                    },
                    success: function (req) {
                        if (req.code == 200) {
                            app.$message.success(req.msg);
                            app.dialogFormVisible = false;
                            app.username = app.user.username;
                        } else {
                            app.$message.error(req.msg);
                        }
                    }
                })
            },
            login: function () {
                $.ajax({
                    url: http + "/login",
                    type: "post",
                    data: { username: app.username, password: app.password },
                    success: function (req) {
                        if (req.code == 200) {
                            window.location.href = "../";
                        } else {
                            app.$message.error(req.msg);
                        }
                    }
                })
            },
        }
    })
</script>

</html>